<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all"/>
</head>
<body layadmin-themealias="default">
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">创建用户</div>
                <div class="layui-card-body" pad15="">
                    <div class="layui-form" wid150="" lay-filter="form">
                        <div class="layui-form-item">
                            <label class="layui-form-label">手机号</label>
                            <div class="layui-input-inline">
                                <input type="text" name="mobile" value="" placeholder="请输入用户手机号（必填）" class="layui-input" lay-verify="required" style="width:400px"/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">登陆密码</label>
                            <div class="layui-input-inline">
                                <input type="password" name="password" value="" placeholder="请输入登录密码（必填）" class="layui-input" lay-verify="required|password" style="width:400px"/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户昵称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="nick_name" value="" placeholder="请输入用户昵称（选填）" class="layui-input" lay-verify="" style="width:400px"/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">性别</label>
                            <div class="layui-input-block">
                                <input type="radio" name="gender" value="1" title="男" checked/>
                                <input type="radio" name="gender" value="2" title="女"/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">头像</label>
                            <div class="layui-input-inline" style="width:130px">
                                <div class="layui-upload">
                                    <div class="layui-upload-list" style="margin: 0px">
                                        <img class="layui-upload-img" id="demo1" width="100" height="100"/>
                                        <p id="demoText"></p>
                                        <input type="hidden" name="avatar" id="LAY_avatarSrc" placeholder="图片地址" value="" class="layui-input"/>
                                    </div>
                                </div>
                                <div style="width: 95px; margin-top:10px;">
                                    <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                                        <div class="layui-progress-bar" lay-percent=""></div>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-input-inline layui-btn-container" style="width: auto;">
                                <button type="button" class="layui-btn layui-btn-primary" id="LAY_avatar">
                                    <i class="layui-icon">&#xe67c;</i>选择头像
                                </button>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">账号类型</label>
                            <div class="layui-input-block">
                                {foreach name="account_typearr" item="vo" key="k" }
                                <input type="radio" name="account_type" value="{$k}" title="{$vo}" {$k==1?'checked':''}/>
                                {/foreach}
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label">专家角色</label>
                            <div class="layui-input-block">
                                <input type="radio" name="expert_type" value="0" title="无" checked/>
                                <input type="radio" name="expert_type" value="1" title="专家"/>
                                <input type="radio" name="expert_type" value="2" title="测试专家"/>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit="" lay-filter="user-add">
                                    确认保存
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/layuiadmin/layui/layui.js"></script>
<script src="/assets/cos-js-sdk-v5/cos-js-sdk-v5.min.js"></script>
<script src="/assets/ue/third-party/jquery-1.10.2.js"></script>
<script>
    var laytpl = null;
    var form = null;

    layui.config({
        base: "/layuiadmin/" //静态资源所在路径
        , version: "{:config('other.ui_version')}"
    }).extend({
        index: "lib/index", //主入口模块
    }).use(["index", "user", "laytpl", "upload", "element"], function () {
        var upload = layui.upload;
        var element = layui.element;
        laytpl = layui.laytpl;
        form = layui.form;
        form.verify({
            password: function (value) {
                if (value.length < 6) {
                    return "密码长度至少为6位";
                }
            },
        });


        var avatarSrc = $("#LAY_avatarSrc");
        //常规使用 - 普通图片上传
        var choosefile;
        var uploadInst = upload.render({
            elem: "#LAY_avatar",
            url: "/admin/user/signForCos", //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    choosefile = file;
                    $("#demo1").attr("src", result); //图片链接（base64）
                });

                element.progress("demo", "0%"); //进度条复位
                layer.msg("上传中", {icon: 16, time: 0});
            },
            done: function (res) {
                //如果上传失败
                if (res.code == 0) {
                    var cos = new COS({
                        getAuthorization: function (options, callback) {
                            var credentials = res.data.credentials;
                            callback({
                                TmpSecretId: credentials.tmpSecretId,
                                TmpSecretKey: credentials.tmpSecretKey,
                                XCosSecurityToken: credentials.sessionToken,
                                ExpiredTime: res.data.expiredTime,
                            });
                        },
                        Domain:res.data.imgDomain,
                    });
                    cos.putObject(
                        {
                            Bucket: res.data.bucket,
                            Region: res.data.region,
                            Key: "images/" + res.data.filename + choosefile.name,
                            Body: choosefile,
                        },
                        function (err, data) {
                            layer.closeAll("loading");
                            if (err) {
                                layer.msg("上传失败", {icon: 5});
                            } else {
                                if (data.statusCode == 200) {
                                    avatarSrc.val("https://" + data.Location);
                                    layer.msg("上传完毕", {icon: 1});
                                } else {
                                    layer.msg("图片上传失败", {icon: 5});
                                }
                            }
                        }
                    );
                } else {
                    layer.closeAll("loading");
                    layer.msg(res.msg, {icon: 5});
                }
                //上传成功的一些操作
                //……
                $("#demoText").html(""); //置空上传失败的状态
            },
            error: function () {
                //演示失败状态，并实现重传
                var demoText = $("#demoText");
                demoText.html(
                    '<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>'
                );
                demoText.find(".demo-reload").on("click", function () {
                    uploadInst.upload();
                });
            },
            //进度条
            progress: function (n, elem, e) {
                element.progress("demo", n + "%"); //可配合 layui 进度条元素使用
                if (n == 100) {
                    // layer.msg('上传完毕', {icon: 1});
                }
            },
        });
    });


</script>
</body>
</html>
